<template>
  <div class="root">
    <m-header title="小钱袋">
      <div slot="left" v-on:click="toHome"><img class="m-icon-img margin-right-10" src="../../assets/images/menu_back.png" /></div>
      <div slot="right"><img class="m-icon-img margin-right-10" src="../../assets/images/menu_more.png" /></div>
    </m-header>

    <div class="content">

      <div class="wallet">
        <router-link to="/walletbalance">
          <div class="wallet-balance">
            <img src="../../assets/images/wallet_money.png" />
            <div class="wallet-balance-title"> 余额 </div>
            <div class="wallet-balance-data">￥{{wallet.balance}}</div>
          </div>
        </router-link>

        <router-link to="/friendfund">
          <div class="wallet-balance">
            <img src="../../assets/images/wallet_fund.png" />
            <div class="wallet-balance-title"> 收益 </div>
            <div class="wallet-balance-data">￥{{wallet.friendFund}}</div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
  import mHeader from '../../components/header'
  import util from '../../util/util.js'
  import {
    mapActions,
    mapState
  } from 'vuex'
  import {
    SET_MY_WALLET
  } from '../../store/myWallet.js'
  export default {
    components: {
      mHeader
    },
    computed: mapState({
      wallet: (state) => state.myWallet
    }),
    methods: {
      ...mapActions([SET_MY_WALLET]),
      getMyWallet() {
        var _this = this;
        this.$http.get('moneybag').then(
          function (response) {
            if (response.data.code === '0') {
              _this.SET_MY_WALLET(response.data.data.moneyBag);
            }
          }
        );
      },
      toHome() {
        console.log('tohome');
        // util.toast('tohome');
        this.$router.push('/home/personalcenter');
      }
    },
    mounted() {
      this.getMyWallet();
    }

  }

</script>

<style lang="less" scoped>
  /*@import "../../assets/less/common.less";*/

</style>
